<template>
  <div class="alarmQuantity">
    <Card dis-hover :bordered="true">
      <template #title>搜索</template>
      <Form ref="formSearch" :model="formDataSearch" label-position="right" :label-width="80" inline>
        <Row>
          <i-col :span="4">
            <FormItem label="车牌号">
              <i-input v-model="formDataSearch.vehiclePlateNo" placeholder="请输入车牌号" clearable/>
            </FormItem>
          </i-col>
          <Col :span="4">
            <FormItem label="营运状态">
              <i-select v-model="formDataSearch.vehicleOperate" filterable placeholder="请选择营运状态" clearable>
                <Option value="1">营运</Option>
                <Option value="2">非营运</Option>
              </i-select>
            </FormItem>
          </Col>
          <Col :span="4">
            <FormItem label="经营类型">
              <i-input v-model="formDataSearch.vehicleTransportName" placeholder="请输入经营类型" clearable/>
            </FormItem>
          </Col>
          <Col :span="4">
            <FormItem label="发证机关">
              <i-input v-model="formDataSearch.certCountyName" placeholder="请输入发证机关" clearable/>
            </FormItem>
          </Col>
          <Col :span="4">
            <FormItem label="区县名称">
              <i-input v-model="formDataSearch.vehicleCountyName" placeholder="请输入区县名称" clearable/>
            </FormItem>
          </Col>
          <Col :span="4">
            <FormItem label="乡镇名称">
              <i-input v-model="formDataSearch.vehicleTownsName" placeholder="请输入乡镇名称" clearable/>
            </FormItem>
          </Col>
          <Col :span="4">
            <FormItem label="发证机关">
              <i-input v-model="formDataSearch.certCountyName" placeholder="请输入发证机关" clearable/>
            </FormItem>
          </Col>
          <Col :span="4">
            <FormItem label="经营企业">
              <i-input v-model="formDataSearch.vehicleCompanyName" placeholder="请输入经营企业" clearable/>
            </FormItem>
          </Col>
<!--          <Col :span="4">-->
<!--            <FormItem label="筛选方式">-->
<!--              <i-select v-model="formDataSearch.vehicleWeightType" filterable placeholder="请选择筛选方式" clearable>-->
<!--                <Option value="1">大于等于</Option>-->
<!--                <Option value="2">小于等于</Option>-->
<!--              </i-select>-->
<!--            </FormItem>-->
<!--          </Col>-->
          <Col :span="4" v-if="formDataSearch.vehicleWeightType">
            <FormItem label="核定总重">
              <i-input v-model="formDataSearch.vehicleTotalWeight" placeholder="请输入核定总重" clearable/>
            </FormItem>
          </Col>
          <Col :span="4" v-if="formDataSearch.vehicleWeightType">
            <FormItem label="核定载重">
              <i-input v-model="formDataSearch.vehicleType" placeholder="请输入核定载质量(kg)" clearable/>
            </FormItem>
          </Col>
          <Col :span="4" v-if="formDataSearch.vehicleWeightType">
            <FormItem label="牵引质量">
              <i-input v-model="formDataSearch.vehicleType" placeholder="请输入准牵引总质量(kg)" clearable/>
            </FormItem>
          </Col>
          <FormItem>
            <Button type="primary" @click="searchSubmit">搜索</Button>
          </FormItem>
        </Row>
      </Form>
    </Card>
    <Card dis-hover :bordered="true" style="height: 100%;overflow: hidden;margin: 10px 0 0;">
      <template #title>列表</template>
      <template #extra>
        <Button type="primary" @click="addInfo" class="btn-style">添加</Button>
        <!--        <Button type="warning" @click="exportData" class="btn-style">批量导出</Button>-->
      </template>
      <xdTable ref="xdTableRef" :tableData="tableData"></xdTable>
    </Card>

    <Drawer title="信息添加/修改" v-model="showEdit" width="48%" :mask-closable="false" :draggable="true" :styles="formOperationStyles">
      <Form ref="formDataRef" :model="formData" :rules="ruleFormData" label-position="right" :label-width="100">
        <Row>
          <Col :span="8">
            <FormItem label="营运状态">
              <i-select v-model="formData.vehicleOperate" filterable placeholder="请选择营运状态" clearable>
                <Option :value="1">营运</Option>
                <Option :value="2">非营运</Option>
              </i-select>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="车牌号" prop="vehiclePlateNo">
              <i-input v-model="formData.vehiclePlateNo" placeholder="请输入车牌号码" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="车牌颜色" prop="vehiclePlateColor">
              <i-select v-model="formData.vehiclePlateColor" filterable placeholder="请选择车牌颜色" clearable>
                <Option v-for="item in vehiclePlateColorList" :key="item.name" :value="item.code">{{item.name }}</Option>
              </i-select>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="车架号" prop="vehicleVinNo">
              <i-input v-model="formData.vehicleVinNo" placeholder="请输入车辆识别代码" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="发动机号" prop="vehicleEngineNo">
              <i-input v-model="formData.vehicleEngineNo" placeholder="请输入发动机号" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="发动机型号" prop="vehicleEngineModel">
              <i-input v-model="formData.vehicleEngineModel" placeholder="请输入发动机型号" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="经营类型" prop="vehicleOperateType">
              <i-input v-model="formData.vehicleOperateType" placeholder="请输入经营类型" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="运政类型" prop="vehicleOperateTypeSubName">
              <i-input v-model="formData.vehicleOperateTypeSubName" placeholder="请输入运政类型" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="燃料种类" prop="vehicleFlueType">
              <i-input v-model="formData.vehicleFlueType" placeholder="请输入燃料种类" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="车辆类型" prop="vehicleType">
              <i-input v-model="formData.vehicleType" placeholder="请输入车辆类型" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="车辆品牌" prop="vehicleBrand">
              <i-input v-model="formData.vehicleBrand" placeholder="请输入车辆品牌" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="车辆型号" prop="vehicleModel">
              <i-input v-model="formData.vehicleModel" placeholder="请输入车辆型号" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="经营业户" prop="vehicleCompanyName">
              <i-input v-model="formData.vehicleCompanyName" placeholder="请输入经营业户" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="联系人" prop="vehicleOwnerName">
              <i-input v-model="formData.vehicleOwnerName" placeholder="请输入车主联系人" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="联系方式" prop="vehicleOwnerPhone">
              <i-input v-model="formData.vehicleOwnerPhone" placeholder="请输入车主联系手机" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="核定总重" prop="vehicleTotalWeight">
              <i-input v-model="formData.vehicleTotalWeight" placeholder="请输入车辆总质量(kg)" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="核定载重" prop="vehiclePermitWeight">
              <i-input v-model="formData.vehiclePermitWeight" placeholder="请输入核定载质量(kg)" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="牵引质量" prop="vehicleTractionWeight">
              <i-input v-model="formData.vehicleTractionWeight" placeholder="请输入准牵引总质量(kg)" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="外廓-长" prop="vehicleLength">
              <i-input v-model="formData.vehicleLength" placeholder="请输入外廓尺寸-长(mm)" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="外廓-宽" prop="vehicleWidth">
              <i-input v-model="formData.vehicleWidth" placeholder="请输入外廓尺寸-宽(mm)" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="外廓-高" prop="vehicleHigh">
              <i-input v-model="formData.vehicleHigh" placeholder="请输入外廓尺寸-高(mm)" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="车辆轴数" prop="vehicleAxle">
              <i-input v-model="formData.vehicleAxle" placeholder="请输入车辆轴数" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="登记日期" prop="vehicleCertificateDate">
              <DatePicker type="date" style="width: 100%" v-model="formDataSearch.vehicleCertificateDate" format="yyyy-MM-dd" placement="bottom-end" placeholder="请选择行驶证初登日期"/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="区县编码" prop="vehicleCountyCode">
              <i-input v-model="formData.vehicleCountyCode" placeholder="请输入区县编码" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="区县名称" prop="vehicleCountyName">
              <i-input v-model="formData.vehicleCountyName" placeholder="请输入区县名称" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="乡镇名称" prop="vehicleTownsName">
              <i-input v-model="formData.vehicleTownsName" placeholder="请输入乡镇名称" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="运输证号" prop="vehicleTransportNo">
              <i-input v-model="formData.vehicleTransportNo" placeholder="请输入道路运输证号" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="发证日期" prop="vehicleTransportDate">
              <DatePicker type="date" style="width: 100%" v-model="formDataSearch.vehicleTransportDate" format="yyyy-MM-dd" placement="bottom-end" placeholder="请选择道路运输证发证日期"/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="机关编码" prop="certCountyCode">
              <i-input v-model="formData.certCountyCode" placeholder="请输入机关编码" clearable/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="发证机关" prop="certCountyName">
              <i-input v-model="formData.certCountyName" placeholder="请输入发证机关名称" clearable/>
            </FormItem>
          </Col>
        </Row>
        <div class="demo-drawer-footer">
          <Button type="primary" @click="submitFormData">保存</Button>
          <Button @click="showEdit = false" style="margin-left: 10px">取消</Button>
        </div>
      </Form>
    </Drawer>

  </div>
</template>
<script setup>

import {inject, onMounted, reactive, ref, resolveComponent} from 'vue'
import xdTable from '@/components/table/index.vue'
import {systemDictList} from "../../util/commonInterfaces";

const $common = inject('$common');//自己封装的方法
const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
const $axios = inject('$axiosInterceptor');// 变量全局化 axios
const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件

/**
 * 是否显示 导入运政车辆的弹窗
 */
const showEnterYzCarDialog = ref(false)

const formDataYz = reactive({
  file: null
})

const formDataYzRef = ref()
const formOperationStyles = {//表单左侧移出css
  height: 'calc(100% - 55px)',
  overflow: 'auto',
  paddingBottom: '53px',
  position: 'static'
}

const ruleYz = {
  fileName: [
    {required: true, message: '请选择文件', trigger: 'blur'}
  ],
}

const submitYz = () => {
  formDataYzRef.value.validate((valid) => {
    if (valid) {

    }
  })
}

/**
 * 是否显示 导入运营商车辆的弹窗
 */
const showEnterYysCarDialog = ref(false)

const formDataYys = reactive({
  file: null,
  fileName: "",
  vehicleOperatorName: ""
})

const formDataYysRef = ref()

const ruleYys = {
  fileName: [
    {required: true, message: '请选择文件', trigger: 'blur'}
  ],
  vehicleOperatorName: [
    {required: true, message: '请输入运营商名称', trigger: 'blur'}
  ],
}

const submitYys = () => {
  formDataYysRef.value.validate((valid) => {
    if (valid) {

    }
  })
}

/**
 * 显示表单的添加和修改
 */
const showEdit = ref(false)
/**
 * 显示数据的删除弹窗
 */
const showDelete = ref(false)
const deleteDataUuid = ref("")
const formData = ref({
  vehicleOperate:1,
})

const vehiclePlateColorList = [
  {code: 1, name: '蓝色'},
  {code: 2, name: '黄色'},
  {code: 3, name: '黑色'},
  {code: 4, name: '白色'},
  {code: 5, name: '绿色'},
  {code: 93, name: '黄绿色'},
  {code: 9, name: '其他'}
]

const formDataRef = ref()

const ruleFormData = {
  vehiclePlateNo: [{required: true, message: '请输入车牌号', trigger: 'blur'}],
  vehiclePlateColor: [{required: true, message: '请选择车牌颜色', trigger: 'blur', type: "number"}],
  vehicleCityCode: [{required: true, message: '请输入地市编码', trigger: 'blur'}],
  vehicleCityName: [{required: true, message: '请输入地市名称', trigger: 'blur'}],
}

const submitFormData = () => {
  formDataRef.value.validate((valid) => {
    if (valid) {
      let msg = $ViewUIPlus.Message.loading({
        content: '保存中...',
        duration: 0
      });
      $axios.post(apiUrl.supervisoryAreaCollectVehicleSaveOrUpdate, formData.value).then((res) => {
        msg()
        showEdit.value = false
        xdTableRef.value.tableLoadData(true)
      }).catch((err) => {
        msg()
      })
    }
  })
}
// 搜索
const formDataSearch = reactive({
})

/**
 * 运政车辆文件选择
 */
const yzUploadBefore = (e) => {
  formDataYz.file = e
  formDataYz.fileName = e.name
  return false
}
/**
 * 运营商车辆文件选择
 */
const yysUploadBefore = (e) => {
  formDataYys.file = e
  formDataYys.fileName = e.name
  return false
}

// 列表数据
// 用于获取$refs
const xdTableRef = ref();
const tableData = reactive({
  url: apiUrl.supervisoryAreaCollectVehiclePageList,//请求地址
  method: 'post',//请求方式
  where: {
  },//搜索条件
  height: '100%',//表格高度 auto
  page: true,//分页是否使用
  columns: [//表头数据
    {type: 'index', width: 70, align: 'center', title: '序号'},
    {title: '道路运输证号', minWidth: 150, key: 'vehicleTransportNo', tooltip: true,},
    {title: '车牌号', minWidth: 120, key: 'vehiclePlateNo', tooltip: true,},
    {title: '车牌颜色', minWidth: 120, key: 'vehiclePlateColor', tooltip: true, render: (h, params) => {
        if (params.row.vehiclePlateColor == 1) {
          return h(resolveComponent('Tag'), { type:'dot',color: "primary" } , "蓝色");
        } else if (params.row.vehiclePlateColor == 2) {
          return h(resolveComponent('Tag'), { type:'dot',color: "warning" } , "黄色");
        } else if (params.row.vehiclePlateColor == 3) {
          return h(resolveComponent('Tag'), { type:'dot',color: "#515a6e" }, "黑色");
        } else if (params.row.vehiclePlateColor == 4) {
          return h(resolveComponent('Tag'), { type:'dot',color: "default" }, "白色");
        } else if (params.row.vehiclePlateColor == 5) {
          return h(resolveComponent('Tag'), { type:'dot',color: "success" }, "绿色");
        } else if (params.row.vehiclePlateColor == 93) {
          return h(resolveComponent('Tag'), { type:'dot',color: "#8ebe19" }, "黄绿色");
        } else if (params.row.vehiclePlateColor == 9) {
          return h(resolveComponent('Tag'), { type:'dot',color: "blue" } , "其他");
        } else {
          return h(resolveComponent('Tag'), { type:'dot',color: "blue" } , "未获取颜色");
        }
      }
    },
    {title: '入网状态', minWidth: 140, key: 'vehicleInternet', tooltip: true, render: (h, params) => {
        if (params.row.vehicleInternet == 0) {
          return h(resolveComponent('Tag'), { type:'dot',color: "warning" } , "未入网");
        } else if (params.row.vehicleInternet == 1) {
          return h(resolveComponent('Tag'), { type:'dot',color: "primary" } , "已入网");
        }
      }
    },
    {title: '营运状态', minWidth: 160, key: 'vehicleOperate', tooltip: true,render: (h, params) => {
        if (params.row.vehicleOperate == 1) {
          return h(resolveComponent('Tag'), { type:'dot',color: "primary" } , "营运");
        } else if (params.row.vehicleOperate == 2) {
          return h(resolveComponent('Tag'), { type:'dot',color: "warning" } , "非营运");
        }
      }},
    {title: '经营类型', minWidth: 120, key: 'vehicleTransportName', tooltip: true,},
    {title: '运政类型', minWidth: 180, key: 'vehicleTransportSubName', tooltip: true,},
    {title: '经营许可证号', minWidth: 180, key: 'vehicleCompanyNo', tooltip: true,},
    {title: '经营业户', minWidth: 180, key: 'vehicleCompanyName', tooltip: true,},
    {title: '车主联系人', minWidth: 180, key: 'vehicleOwnerName', tooltip: true,},
    {title: '车主联系手机', minWidth: 120, key: 'vehicleOwnerPhone', tooltip: true,},
    {title: '所属地区', minWidth: 180, key: 'vehicleProvinceName', tooltip: true, render: (h, params) => {
        return h('span', {}, `${params.row.vehicleProvinceName} - ${params.row.vehicleCityName} - ${params.row.vehicleCountyName}`)
      }
    },
    {title: '乡镇名称', minWidth: 120, key: 'vehicleTownsName', tooltip: true,},
    {title: '发证机关', minWidth: 180, key: 'certCountyName', tooltip: true,},
    {title: '道路运输证发证日期', minWidth: 190, key: 'vehicleTransportDate', tooltip: true,},
    {title: '操作', width: 110, fixed: 'right', render: (h, params) => {
        var operationButtons = [];
        operationButtons.push(
            h('span', {
              style: {"color": "#2d8cf0", "cursor": "pointer"},
              onClick: () => {
                formData.value = JSON.parse(JSON.stringify(params.row))
                showEdit.value = true
              }
            }, '修改')
        )
        operationButtons.push(h(resolveComponent('Divider'), {type: 'vertical',}, ''))
        operationButtons.push(
            h('span', {
              style: {"color": "#2d8cf0", "cursor": "pointer",},
              onClick: () => {
                $ViewUIPlus.Modal.confirm({
                  title: '删除提醒',
                  content: '确定要删除选中的记录？',
                  onOk: () => {
                    deleteData(params.row.uuid)
                  },
                  onCancel: () => {
                    //点击取消
                  }
                })
              }
            }, '删除')
        )
        return operationButtons;
      }
    },
  ],
  pagingParameters: {// 分页参数
    page: 'pageNo',
    limit: 'pageSize'
  },
  format: {//返回数据格式
    list: ['data'],//数据list
    count: ['count'],//数据总量
  },
})

const state = reactive({
  carPlateColor: [
    {codeNumber: 1, color: 'primary', desc: '蓝色'},
    {codeNumber: 2, color: 'warning', desc: '黄色'},
    {codeNumber: 3, color: 'black', desc: '黑色'},
    {codeNumber: 4, color: ' ', desc: '白色'},
    {codeNumber: 5, color: 'success', desc: '绿色'},
    {codeNumber: 93, color: '#87d068', desc: '黄绿色'},
    {codeNumber: 9, color: 'cyan', desc: '其他'}
  ],//车辆颜色
  transportTypeList: [],//经营类型
  personTypeList: [],//从业类型
  selectData: {},//选中数据
  formOperation: false,//弹框状态
  formTitle: '',//弹框标题
  formData: {
    username: 'gtjt_llb',
    password: 'sersllb123',
  },//表单数据
});

onMounted(async () => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
  state.transportTypeList = await systemDictList({type: 'transport_type'})
})

//搜索方法
const searchSubmit = () => {
  let data = Object.assign({}, formDataSearch);
  tableData.where = data;
  xdTableRef.value.tableLoadData(true)
}

/**
 * 显示删除的弹窗
 */
const deleteData = (e) => {
  let msg = $ViewUIPlus.Message.loading({
    content: '删除中...',
    duration: 0
  });
  $axios.post(apiUrl.supervisoryAreaCollectVehicleDelete, {uuid: e}).then((res) => {
    msg()
    xdTableRef.value.tableLoadData(true)
  }).catch((err) => {
    msg()
  })
}

/**
 * 添加信息
 */
const addInfo = () => {
  formData.value = {}
  showEdit.value = true
}

/**
 * 导出数据
 */
const exportData = () => {
  let msg = $ViewUIPlus.Message.loading({
    content: '导出中...',
    duration: 0
  });
  $axios.post(apiUrl.supervisoryAreaCollectVehicleExport, formDataSearch).then((res) => {
    msg()
    if (!!res) {
      window.open(`${apiUrl.imgUrl}${res.data.data}`)
    }
  }).catch((err) => {
    msg()
  })
}
</script>

<style lang="less">
.alarmQuantity {
  padding: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;

  .ivu-card-body {
    height: calc(100% - 41px);
  }

  .btn-style {
    position: relative;
    top: -8px;
    margin-left: 10px;
  }
}
</style>
